import React, { useEffect } from 'react';
import './Housing_Card.css';
import { Tag, Divider, Row, Col } from '@nutui/nutui-react';

export default function Housing_Card({ RoomItem }) {
  useEffect(() => {
    console.log(RoomItem)
  }, [])
  return (
    <div className="housing-card">
      <div className="housing-card__Head">
        <Tag background="#006eff" color="white" style={{ width:' .8rem',height: '0.4rem',fontSize: '.3rem',visibility: RoomItem.def_Status == 1? 'visible' : 'hidden'}}>默认</Tag>
        <span>{RoomItem.ne}</span>
        <Tag
           background={RoomItem.auth_status == 1? "#ffd700" : RoomItem.auth_status == 2? "#d4f6e3" : "#f08080"}
           color={RoomItem.auth_status == 1? "#8b4513" : RoomItem.auth_status == 2? "#2ed477" : "#dc143c"}
          style={{ fontSize: '14px' }}>
          {RoomItem.auth_status == 1 ? '认证中' : RoomItem.auth_status == 2 ? '认证成功' : '认证失败'}
        </Tag>
      </div>
      <Divider />
      <div className='housing-card__Body'>
        <div className='ROW'>
          <div style={{ width: '25%', color: 'gray' }}>
            <span>房间号</span>
          </div>
          <div style={{ width: '75%' }}>
            <span>{RoomItem.unit}</span>
          </div>
        </div>
        <div className='ROW'>
          <div style={{ width: '25%', color: 'gray' }}>
            <span>业主</span>
          </div>
          <div style={{ width: '75%' }}>
            <span>{RoomItem.owner}</span>
          </div>
        </div>
        <div className='ROW'>
          <div style={{ width: '25%', color: 'gray' }}>
            <span>房屋状态</span>
          </div>
          <div style={{ width: '75%' }}>
            <span>{RoomItem.status}</span>
          </div>
        </div>
      </div>
    </div>
  );
}